<template>
	<view class="homeLayout">
		<view class="header">
			<home-head></home-head>
		</view>

		<view class="body">
			<view class="swiperOut">
				<swiper :current="currentIndex" indicator-dots autoplay :interval="3000" :duration="1000" vertical circular
					@change="swiperChange">
					<swiper-item v-for="(index,item) in listData" :key="index">
						<!-- 鸡汤内容 -->
						<navigator class="content" url="/pages/detail/detail">
							<soup-tab-group></soup-tab-group>
							<soup-text-content :maxLine="5" :isShowReadNum="false"></soup-text-content>

						</navigator>

						<interactive-bar :isComment="false"></interactive-bar>
					</swiper-item>

					<swiper-item class="ad">
						<view class="message">
							<view class="title">小主，今天的鸡汤已干完！</view>
							<text class="desc">每日5碗鸡汤，如果想要加餐，\n点击下方看广告按钮，可继续推送5碗，\n每日最多加餐5次。</text>
						</view>
						<view class="btnGroup">
							<view class="btn">看广告刷新</view>
							<view class="text">今日还有5次机会</view>
						</view>
					</swiper-item>

				</swiper>
			</view>

			<!-- 进度条 -->
			<view class="progress">
				<view class="line" :style="{width:lineWith + '%'}">

				</view>
			</view>

		</view>

		<uni-popup ref="userPopup" type="center" class="userPopup" @maskClick="closeUserPopup" @touchmove="closeUserPopup">
			<view class="box">
				<image src="../../static/images/upward.png" mode="heightFix" @click="closeUserPopup"></image>
			</view>
		</uni-popup>


	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		onReady
	} from "@dcloudio/uni-app";
	import {
		useCounterStore
	} from "../../stores/counter.js";


	const counterStore = useCounterStore()
	console.log(counterStore)


	const currentIndex = ref(0)
	const listData = ref([1])
	const userPopup = ref(null)
	const userState = ref(false) // 用戶是否操作过手势动画

	onReady(() => {
		let state = uni.getStorageSync("userState") || false
		if (!state) {
			// 打开弹出层
			userPopup.value.open();
		}

	})

	// 滑动时将当前滑到的索引赋值给currentIndex
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current
	}

	const closeUserPopup = () => {
		userPopup.value.close(); // 关闭弹出层
		uni.setStorageSync("userState", true)
	}

	// 动态计算宽度 索引从0开始
	const lineWith = computed(() => ((currentIndex.value + 1) / (listData.value.length + 1)) * 100)
</script>

<style scoped lang="scss">
	.homeLayout {
		// 多重径向渐变
		background:
			radial-gradient(50% 200px at left top, #D5F8FC, transparent), // 左上角 
			radial-gradient(50% 200px at right top, #D3CBFC, transparent); // 右上角

		height: 100vh; // 全屏高度
		background: #BDE1FB;
		display: flex;
		flex-direction: column; // 垂直方向排列，header和body是上下关系


		.header {
			//height: 350rpx;
		}

		.body {
			flex: 1; // 占满剩余空间，比如上面350 下面就是全屏减去350的高度
			background: #fff;
			border-radius: 50rpx 50rpx 0 0; // 左上角、右上角、右下角、左下角。
			overflow: hidden; // 隐藏子元素swiper超出部分，防止内容溢出。

			.swiperOut {
				height: calc(100% - 8rpx);

				swiper {
					height: 100%;

					&-item {
						.content {
							height: calc(100% - 130rpx);
							display: flex;
							justify-content: center;
							flex-direction: column;
							padding: 0 30rpx;
						}


					}

					.ad {
						background: #F8F8F8;
						//padding:100rpx 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						text-align: center;

						.message {
							background: #fff;
							border-radius: 30rpx;
							padding: 40rpx;

							.title {
								font-size: 46rpx;
								padding-bottom: 20rpx;
								border-bottom: 1px solid #eee;
								margin-bottom: 20rpx;
							}

							.des {
								font-size: 32rpx;
								color: #555;
								line-height: 1.8em;
							}
						}

						.btnGroup {
							font-size: 30rpx;
							//border: solid 1px;
							margin-bottom: 60rpx;

							.btn {
								width: 400rpx;
								height: 100rpx;
								border-radius: 100rpx;
								background: linear-gradient(to top, #93c4ff, #b1e1ff);
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 38rpx;
								color: #203e5f;
								margin-bottom: 10rpx;
							}

							.text {
								padding: 20rpx 0;
							}
						}
					}

				}

			}

			.progress {
				height: 8rpx;
				width: 100%;
				background: #eee;

				.line {
					height: 100%;
					//width:20% 动态调整宽度
					background: linear-gradient(to right, #BCE0FD, #74dbef);
				}
			}



		}
	}

	.userPopup {
		image {
			//border: solid 1px red;
			padding-top: 15vh;
			height: 150rpx;
			// 做的更好还可以再手指加个向上的箭头
			animation: userAnimate 1.5s infinite; // 从上到下移动，无限循环播放动画，并设置动画持续时间为1.5秒。

		}
	}

	// css3自定义动画
	@keyframes userAnimate {

		// 先向上滑动到100rpx,就相当于滑到100%了。然后从100rpx开始向下滑动到-100rpx，相当于滑到0%了。这样就实现了无限循环的效果。
		0% {
			transform: translateY(100rpx);
			opacity: 0; // 隐藏图片
		}

		100% {
			transform: translateY(-100rpx);
			opacity: 1; // 显示图片
		}
	}
</style>